Skip to main content

String Methods

Resources

Javascript strings are primitive and immutable: All string methods produce a new string without altering the original string.

0. String Primitive vs. String Object​

In JavaScript, strings are primitive data types, but there are also string objects. String objects are created using the string constructor function.

const greetingObject = new String("Hello, World!");

console.log(typeof greetingObject); // "object"

Note: Generally, using new String is not necessary because this creates a string object instead of a string primitive.

  • Using the strict equality operator (===) between a string object and a string primitive will always return false, even if their content is identical. e.g. 'hello' === new String('hello') is false.
  • JavaScript already utilizes autoboxing to execute the string methods, so using the string constructor is redundant.

Autoboxing​

  • String primitives are usually more memory efficient and faster compared to string objects.
  • When a method is used on a string, JavaScript will temporarily wraps the string primitive in a string object, to perform the operation. This process is called autoboxing.

Example Let’s say you have a string primitive and you want to use a method like .toUpperCase():

const name = "solidifying";
console.log(name.toUpperCase()); // "SOLIDIFYING"

Here’s what happens behind the scenes:

  1. JavaScript sees that name is a primitive string.
  2. It creates a temporary String object wrapper around name.
  3. The .toUpperCase() method is called on the String object.
  4. The result is returned, and the temporary object is discarded.

→ This is why you can call methods on primitives without explicitly creating an object.

1. String() function​

The String() function converts its argument to a string.

const myNum2 = 123;
const myString2 = String(myNum2);
console.log(typeof myString2); // Output: string

2. String Length Method​

The length property returns the length of a string:

let text = "Hello";  
let length = text.length; 
console.log(length); // Output: 5

3. Methods for Extracting String Character​

These 4 methods for extracting string characters:

  • The charAt(_position_) Method
  • The charCodeAt(_position_) Method
  • The at(_position_) Method
  • Using property access [] like in arrays.
  1. charAt(): the method returns the character at a specified index (position) in a string.
let text = "HELLO WORLD";  
let char = text.charAt(0);
console.log(char); // Output: "H"
  1. charCodeAt(): the method returns the code of the character at a specified index in a string. The method returns a UTF-16 code (an integer between 0 and 65535).
let text = "HELLO WORLD";  
let char = text.charCodeAt(0); // Output: 72
  1. at(): the method returns the character at a specified index (position) in a string.
  • The at() method is a new addition to JavaScript. It allows the use of negative indexes while charAt() does not.
const name = "University";  
let letter = name.at(2); // Output: i

// negative index
let char = name.at(-1); // Output: y
  1. Property Access []
  • If no character is found, [] returns undefined, while charAt() returns an empty string.
  • It is read-only. str[0] = "A" gives no error (but does not work!)
let text = "HELLO WORLD";  
let char = text[0]; // Output: H
console.log(text[-1]); // Output: undefined

text[0] = "A";    // Gives no error, but does not work, because JS is immutable

4. Methods for Extracting String Parts​

There are 3 methods for extracting a part of a string:

  • slice(_start_, _end_)
  • substring(_start_, _end_)
  • substr(_start_, _length_)
  1. slice(): extracts a part of a string and returns the extracted part in a new string.
  • The method can take 2 parameters: start position, and end position (end not included).
  • The method can take only 1 parameter, which is the start position, the method will slice the rest of the string starting from this starting position.
  • If the parameter value is negative, the position is counted from the end of the string.
let text = "Apple, Banana, Kiwi";  

// two parameters
let part1 = text.slice(7, 13);
console.log(part1); // Output: Banana (the character at index 13 is not included)

// one parameter
let part2 = text.slice(7); 
console.log(part2);

// negative parameter
let part3 = text.slice(-12, -6)
console.log(part3); // Output: Banana
  1. substring(): substring() is similar to slice().
  • The difference is that start and end values less than 0 (negative) are treated as 0 in substring().
  • If you omit the second parameter, substring() will slice out the rest of the string.
let str = "Apple, Banana, Kiwi";  
let part = str.substring(7, 13); // Output: Banana

// negative parameter
console.log(str.substring(-10, 13)) // Apple, Banana

// one parameter
console.log(str.substring(7)) // Output: Banana, Kiwi
  1. substr(): substr() is similar to slice().
  • The difference is that the second parameter specifies the length of the extracted part in the second argument of the parameter.
  • If you omit the second parameter, substr() will slice out the rest of the string.
  • If the first parameter is negative, the position counts from the end of the string.
let str = "Apple, Banana, Kiwi";  
let part = str.substr(7, 6); 

// one parameter
console.log(str.substr(7)); // Output: Banana, Kiwi

// negative parameter
console.log(str.substr(-4)); // Output: Kiwi

5. Converting to Upper and Lower Case​

  • A string is converted to upper case with toUpperCase().
  • A string is converted to lower case with toLowerCase().
let text = "Hello World!";  
let upper = text.toUpperCase(); // Output: HELLO WORLD!
let lower = text.toLowerCase(); // Output: hello world!

6. concat()method​

The concat() method joins two or more strings.

  • The concat() method can be used instead of the + operator to concatenate string.
// these two lines do the same thing. // Output: Hello World!
text = "Hello" + " " + "World!";  
text = "Hello".concat(" ", "World!");

7. trim method​

The trim() method removes whitespace from both sides of a string:

let text1 = "      Hello World!      ";  
let text2 = text1.trim(); // Output: "Hello World"
  • The trimStart() method works like trim(), but removes whitespace only from the start of a string.
  • The trimEnd() method works like trim(), but removes whitespace only from the end of a string.
let text1 = "      Hello World!      ";  
let text2 = text1.trimStart(); // Output: "Hello World!      "
let text3 = text1.trimEnd(); // Output: "     Hello World!"

8. repeat() method​

The repeat() method returns a string with a number of copies of a string. The method returns a new string and does not change the original string. The syntax is: string_.repeat(_count_)

let text = "Hello world!";  
let result = text.repeat(2); // Output: Hello world!Hello world!

9. replace() method​

The replace() method replaces a specified value with another value in a string. The method does not change the string it is called on, it returns a new string.

  • By default, replace() method replaces only the first match.
  • By default, replace() method is case sensitive.
let oldText = "Please visit Microsoft and Microsoft!";  
let newText = oldText.replace("Microsoft", "W3Schools");
// Output: Please visit W3Schools and Microsoft!

10. split() method​

A string can be converted to an array with the split() method. The method takes in an argument that is the separator:

text.split(",")    // Split on commas  
text.split(" ")    // Split on spaces  
text.split("|")    // Split on pipe
text.split("")     // Split on each character
let myString = "Hello!"; 
let myArray = myString.split("");